<template>
    <div class="banner-detail">
        <a-modal width="1300px" :visible="visible" title="编辑banner" @cancel="closeModal" class="yuan-modal banner-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :class="isShow?'disable-form':''" :label-col="{ style: { width: '150px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel yuan-form-col3">
                        <div class="form-panel-box">
                            <div class="form-title">banner信息</div>
                            <a-form-model-item class="yuan-form-item" label="banner类型" prop="belongToPage">
                                <a-select style="width:200px" class="yuan-form-input" v-model="formData.belongToPage"
                                    placeholder="请选择banner类型">
                                    <a-select-option value="首页">首页</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <div style="border:solid 1px #eee;padding:15px;margin-top:5px">
                                <div style="margin-bottom:10px">上传banner图片 （jpg.png.gif格式.不超过2MB，长宽比例为'1.8：1'）</div>
                                <div v-for="(item,idx) in bannerList" :key="'banner_'+item.key"
                                    style="background-color:#f5f5f5;margin-bottom:10px;padding:15px 0;border-radius:5px;position:relative">
                                    <a-form-model-item label="封面图" class="yuan-form-item" v-if="pageReady" prop="pictures">
                                        <UploadVue :uploadLength="1" @uploadChange="(e)=>uploadChangeCoverImageUrl(e,idx)"
                                            :defImgList="item.url?[item.url]:[]" />
                                    </a-form-model-item>
                                    <a-form-model-item label="banner跳转地址" class="yuan-form-item" prop="pictures">
                                        <a-input class="yuan-form-input" placeholder="请输入地址"
                                            v-model="bannerList[idx].content"></a-input>
                                    </a-form-model-item>
                                    <div class="delete-banner">
                                        <a-button type="danger" @click="clickDel(idx)" v-if="bannerList.length>1">删除</a-button>
                                    </div>

                                </div>
                                <div style="text-align:center">
                                    <a-button type="primary" @click="clickAdd()">添加</a-button>
                                </div>
                            </div>

                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <template v-if="isShow">
                    <a-button @click="closeModal">
                        关闭
                    </a-button>
                </template>
                <template v-else>
                    <a-button @click="modalOk" type="primary" :loading="saveLoading">
                        确认保存
                    </a-button>
                    <a-button @click="closeModal">
                        取消
                    </a-button>
                </template>

            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import shopMallApi from "@/api/shopMallApi";
@Component({
    name: "tpl",
    components: { UploadVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: "" }) editInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            if (this.editInfo.id) {
                const pictures = this.editInfo.pictures ? JSON.parse(this.editInfo.pictures) : [];
                this.formData = {
                    id: this.editInfo.id,
                    belongToPage: this.editInfo.belongToPage,
                };
                this.bannerList = this.editInfo.picturesJSON.map((item, idx) => {
                    return {
                        ...item,
                        key: new Date().getTime() + "_" + idx,
                    };
                });
                this.pageReady = true;
            } else {
                this.formData = {
                    pictures: [],
                };
                this.bannerList = [{ key: new Date().getTime() }];
                this.pageReady = true;
            }
        } else {
            this.pageReady = false;
        }
    }
    saveLoading = false;
    formData: any = {
        pictures: [],
    };
    rules = {
        belongToPage: [{ required: true, message: "请选择banner类型", trigger: "change" }],
    };
    pageReady = false;

    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }

    async modalOk() {
        let isArrow = true;
        const picturesJSON: any[] = [];
        this.bannerList.forEach((item) => {
            if (item.url === "" || item.content === "") {
                isArrow = false;
            }
            picturesJSON.push({
                url: item.url,
                content: item.content,
                type: "url",
            });
        });

        if (!isArrow) {
            this.$message.error("请完善banner图片上传和跳转地址设置");
            return;
        }
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) {
                this.$message.error("必填信息不完整，请检查后重试");
                return;
            }
            this.saveLoading = true;
            try {
                const res = await shopMallApi.addBanner({ belongToPage:this.formData.belongToPage, picturesJSON });
                this.$message.success("保存成功");
                this.closeModal();
                this.$emit("resetList");
            } finally {
                this.saveLoading = false;
            }
        });
    }

    bannerList: any[] = [{ key: new Date().getTime() }];
    uploadChangeCoverImageUrl(e, idx) {
        const bannerList = this.bannerList;
        bannerList[idx].url = e.length ? e[0].url : "";
        this.bannerList = bannerList;
    }
    clickAdd() {
        this.bannerList.push({ key: new Date().getTime() });
    }
    clickDel(idx) {
        this.bannerList.splice(idx, 1);
    }
}
</script>
<style lang="scss">
.banner-detail-modal {
    .delete-banner {
        position: absolute;
        right: 5px;
        top: 5px;
    }
}
</style>
